import "../roleManagement/index.scss";
import { useState, useEffect } from "react";
import {
  SearchOutlined,
  DoubleLeftOutlined,
  CloseOutlined,
} from "@ant-design/icons";
import {
  Divider,
  Button,
  Table,
  Form,
  Input,
  Drawer,
  Select,
  Breadcrumb,
} from "antd";
import type { ColumnsType } from "antd/es/table";
import type { DrawerProps} from "antd";
import { useNavigate } from "react-router-dom";
interface a {
  userId: number;
}
interface DataType {
  key: React.Key;
  userName: string;
  name: string;
  tell: number;
  sex: string;
  organization: string;
  verificationCode: string;
  status: string;
  creationTime: string;
}

//搜索
const UserManagement: React.FC = () => {
  const navigate = useNavigate();
  const onSearch = (search: a) => {
    console.log("搜索", search);
  };

  //高级筛选
  const senior = () => {
    if (open == false) {
      setOpen(true);
    } else {
      setOpen(false);
    }
  };
  // 表格数据
  const columns: ColumnsType<DataType> = [
    {
      title: "用户名",
      dataIndex: "userName",
    },
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "手机号码",
      dataIndex: "tell",
    },
    {
      title: "性别",
      dataIndex: "sex",
    },
    {
      title: "所属机构",
      dataIndex: "organization",
    },
    {
      title: "短信验证码",
      dataIndex: "verificationCode",
      render: (text: string) => (
        <span>{text == "1" ? "开启" : text == "2" ? "关闭" : ""}</span>
      ),
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (text: string) => (
        <span>{text == "1" ? "正常" : text == "2" ? "停用" : ""}</span>
      ),
    },
    {
      title: "创建时间",
      dataIndex: "creationTime",
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      userName: "xuefei",
      name: "学费管理员",
      tell: 15295089820,
      sex: "男",
      organization: "xx学校1",
      verificationCode: "1",
      status: "2",
      creationTime: "2021-01-01",
    },
    {
      key: "2",
      userName: "wuyefei",
      name: "物业费管理员",
      tell: 18812365498,
      sex: "女",
      organization: "xx学校2",
      verificationCode: "2",
      status: "1",
      creationTime: "2021-01-01",
    },
    {
      key: "3",
      userName: "dangfei",
      name: "党费管理员",
      tell: 17865214832,
      sex: "男",
      organization: "xx学校3",
      verificationCode: "1",
      status: "1",
      creationTime: "2021-01-01",
    },
  ];
  const pagination = {
    defaultPageSize: 5,
    defaultCurrent: 1,
    total: data.length,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
  };
  //当前数据
  const [nowData, setNowData] = useState({});
  //选中表格数据
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`key值: ${selectedRowKeys}`, "数据: ", selectedRows[0]);
      setNowData({ ...selectedRows[0] });
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === "党费管理员",
      roleType: record.name,
    }),
  };
  //高级筛选
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState<DrawerProps["placement"]>("top");
  const filtering = (search: DataType) => {
    console.log("高级筛选", search);
    console.log("筛选前", data);
    let _data = data.filter((v) => {
      return v.userName.includes(search.userName) || v.tell == search.tell;
    });
    console.log("筛选后", _data);
  };
  const onClose = () => {
    setOpen(false);
  };
  const iStyle = {
    color: "#d6d6d6",
  };
  //重置高级筛选数据
  const reset = () => {};

  /* 编辑 */
  const [editForm] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = (record: any) => {
    //  console.log(record)
    //  record.a_type = record.a_type + ''
    console.log("当前数据", nowData);
    editForm.setFieldsValue({ ...nowData });
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onEdit = () => {
    const data = editForm.getFieldsValue(true);
    console.log("编辑数据", data);
  };

  //新增
  const [openAdd, setOpenAdd] = useState(false);
  const [placementAdd] = useState<DrawerProps["placement"]>("top");
  const onAdd = () => {
    console.log(444);
    setOpenAdd(true);
  };
  const onCloseAdd = () => {
    setOpenAdd(false);
  };
  const addStyle = {
    position: "absolute",
    top: "100px",
    left: "200px",
    // width:'1400px',
    display: "flex",
  };

  const style = {
    display: "flex",
    marginBottom: "10px",
    justifyContent: "space-around",
  };

  return (
    <div className="system">
      {/* 路径 */}
      <div className="title">
        <Breadcrumb separator=">">
          <Breadcrumb.Item>系统管理</Breadcrumb.Item>
          <Breadcrumb.Item href="#">用户管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <Divider />
      {/* 搜索 */}
      <div>
        <Form
          className="search"
          layout="inline"
          onFinish={onSearch}
          style={{ justifyContent: "space-between" }}
        >
          <div style={style}>
            <Form.Item>
              <Button
                type="primary"
                style={{ background: "#69657e" }}
                onClick={onAdd}
              >
                新增
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                onClick={showModal}
                type="primary"
                style={{ background: "#69657e" }}
              >
                修改
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" style={{ background: "#69657e" }}>
                删除
              </Button>
            </Form.Item>
          </div>
          <div style={style}>
            <Form.Item name="userId">
              <Input placeholder="请输入管理员姓名" />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                style={{ background: "#69657e" }}
                icon={<SearchOutlined />}
                htmlType="submit"
              >
                搜索
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" style={{ background: "#69657e" }}>
                重置
              </Button>
            </Form.Item>
            <Divider type="vertical" className="ver" />
            <Form.Item>
              <Button type="link" style={{ color: "#52a6ff" }} onClick={senior}>
                高级筛选
                <DoubleLeftOutlined rotate={270} style={iStyle} />
              </Button>
            </Form.Item>
          </div>
        </Form>
      </div>
      {/* 高级筛选弹框 */}
      <div className="site-drawer-render-in-current-wrapper">
        <Drawer
          destroyOnClose={true}
          placement={placement}
          closable={false}
          onClose={onClose}
          open={open}
          key={placement}
          getContainer={false}
          height={200}
        >
          <Form
            className="senior"
            layout="inline"
            onFinish={filtering}
            style={{ display: "flex", flexDirection: "column" }}
          >
            <div style={{ display: "flex" }}>
              <Form.Item label="用户名" name="userName">
                <Input placeholder="请输入用户名" />
              </Form.Item>
              <Form.Item label="手机号" name="tell">
                <Input placeholder="请输入手机号" />
              </Form.Item>
              <Form.Item label="姓名" name="name">
                <Input placeholder="请输入姓名" />
              </Form.Item>
              <Form.Item label="所属机构" name="organization">
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="1">xxx学校1</Select.Option>
                  <Select.Option value="2">xxx学校2</Select.Option>
                  <Select.Option value="3">xxx学校3</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div style={{ display: "flex", marginTop: "10px" }}>
              <Form.Item label="短信验证码" name="verificationCode">
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="1">开启</Select.Option>
                  <Select.Option value="2">关闭</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item label="状态" name="status">
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="1">正常</Select.Option>
                  <Select.Option value="2">停用</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div
              className="seniorClose"
              onClick={() => {
                setOpen(false);
              }}
            >
              <CloseOutlined />
            </div>
            <div className="seniorBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  icon={<SearchOutlined />}
                  htmlType="submit"
                >
                  查询
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  icon={<SearchOutlined />}
                  onClick={reset}
                >
                  重置
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>

      {/* 表格 */}
      <Table
        rowSelection={{
          type: "radio",
          ...rowSelection,
        }}
        bordered={true}
        columns={columns}
        dataSource={data}
        pagination={pagination}
      />

      {/* 编辑 */}
      <div className="add">
        <Drawer
          title="用户管理 - 修改"
          placement={placementAdd}
          onClose={handleCancel}
          open={isModalOpen}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "20%",
            width: "70%",
          }}
        >
          <Form
            form={editForm}
            className="addForm"
            layout="inline"
            onFinish={onSearch}
            style={{ position: "relative", flexDirection: "column" }}
          >
            <div style={style}>
              <Form.Item
                label="用户名"
                name="userName"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="姓名"
                name="name"
                rules={[
                  {
                    required: true,
                    message: "必须添加姓名",
                  },
                ]}
              >
                <Input placeholder="" />
              </Form.Item>
              <Form.Item
                label="手机号码"
                name="tell"
                rules={[
                  {
                    required: true,
                    message: "必须添加姓名",
                  },
                ]}
              >
                <Input placeholder="" />
              </Form.Item>
            </div>
            <div style={style}>
              <Form.Item
                label="所属机构"
                name="organization"
                rules={[
                  {
                    required: true,
                    message: "必须添加姓名",
                  },
                ]}
              >
                <Input placeholder="" />
              </Form.Item>

              <Form.Item
                label="角色"
                name="status"
                rules={[{ required: true }]}
              >
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="1">学费管理员</Select.Option>
                  <Select.Option value="2">物业管理与</Select.Option>
                  <Select.Option value="3">党费管理员</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item
                label="状态"
                name="status"
                rules={[{ required: true }]}
              >
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="1">正常</Select.Option>
                  <Select.Option value="2">停用</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div style={style}>
              <Form.Item
                label="设置密码"
                name="organization"
                rules={[
                  {
                    required: true,
                    message: "密码不能为空",
                  },
                ]}
              >
                <Input.Password placeholder="请输入登陆密码" />
              </Form.Item>
              <Form.Item
                name="confirm"
                label="确认密码"
                dependencies={["organization"]}
                rules={[
                  {
                    required: true,
                    message: "请确认密码！",
                  },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue("organization") === value) {
                        return Promise.resolve();
                      }
                      return Promise.reject(
                        new Error("您输入的两个密码不一致！")
                      );
                    },
                  }),
                ]}
              >
                <Input.Password placeholder="请输入登陆密码" />
              </Form.Item>
              <Form.Item
                label="短信验证码"
                name="verificationCode"
                rules={[{ required: true }]}
              >
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="1">开启</Select.Option>
                  <Select.Option value="2">关闭</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div
              className="addBtn"
              style={{
                display: "flex",
                justifyContent: "space-around",
                marginTop: "50px",
              }}
            >
              <Form.Item>
                <Button
                  type="primary"
                  style={{
                    background: "#69657e",
                  }}
                  htmlType="submit"
                >
                  保存
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>

      {/* 新增 */}
      <div className="add">
        <Drawer
          title="用户管理 - 新增"
          destroyOnClose={true}
          placement={placementAdd}
          closable={false}
          onClose={onCloseAdd}
          open={openAdd}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "20%",
            width: "70%",
          }}
        >
          <Form
            className="addForm"
            layout="inline"
            onFinish={onSearch}
            style={{ position: "relative", justifyContent: "center" }}
          >
            <Form.Item
              label="角色类型"
              name="roleType"
              rules={[{ required: true }]}
            >
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="系统角色">系统角色</Select.Option>
                <Select.Option value="机构角色">机构角色</Select.Option>
                <Select.Option value="销售角色">销售角色</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="角色名称"
              name="roleName"
              style={{ margin: "0 10px 8px 8px" }}
              rules={[
                {
                  required: true,
                  message: "必须添加姓名",
                },
              ]}
            >
              <Input placeholder="请输入角色名称" />
            </Form.Item>
            <Form.Item label="状态" name="status" rules={[{ required: true }]}>
              <Select style={{ width: 180 }} placeholder="请选择">
                <Select.Option value="1">正常</Select.Option>
                <Select.Option value="2">停用</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              label="角色描述"
              name="roleDescription"
              style={{ marginLeft: "25px" }}
            >
              <Input.TextArea rows={5} cols={104} />
            </Form.Item>
            <div
              className="addClose"
              onClick={() => {
                setOpen(false);
              }}
            ></div>
            <div className="addBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{
                    background: "#69657e",
                    position: "absolute",
                    top: "160px",
                    left: "-420px",
                  }}
                  htmlType="submit"
                >
                  保存
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
    </div>
  );
};
export default UserManagement;
